<template>
	<view class="container">
		<u-form :model="form" ref="uForm">
			<u-form-item prop="type"  label="类型">
				<u-radio-group v-model="form.type" @change="radioGroupChange($event)">
					<u-radio 
						shape="circle" 
						v-for="(item, index) in lostFoundTypeList" 
						:key="index" 
						:name="item.dictValue">{{ item.dictLabel }}</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item prop="title"  label="物品名称" label-width="150">
				<u-input v-model="form.title" :clearable="false" maxlength="20"/>
			</u-form-item>
			
			<u-form-item  prop="content" label="内容"> 
				<u-input 
					v-model="form.content" 
					type="textarea" 
					maxlength=140
					:border="false"
					:auto-height="false"
					:clearable="false"
					placeholder="描述一下物品" />
			</u-form-item>
			
			<u-form-item  label="图片">
				<u-upload 
					:action="action" 
					:header="header" 
					:file-list="fileList"
					name="file" 
					@on-uploaded="uploaded"
					ref="uUpload" 
					:auto-upload="false" 
					max-count="1"
					:limitType="limitType"
					:size-type="sizeType"
					:show-progress="false">
				</u-upload>
			</u-form-item>
			
			<u-form-item prop="pickAddress" v-if="form.type == 1" label="拾取地址" label-width="150">
				<u-input v-model="form.pickAddress" :clearable="false" maxlength="20"/>
			</u-form-item>
			
			<u-form-item prop="takeAddress" v-if="form.type == 1" label="寄放地址" label-width="150">
				<u-input v-model="form.takeAddress" :clearable="false" maxlength="20"/>
			</u-form-item>
			
			<u-button  type="error" shape="circle" :loading="loading" @click="submit">发布</u-button>
			
			<u-toast ref="uToast" />
			
		</u-form>
		
	</view>
</template>

<script>
	import {appConfig} from '@/config/config.js'
	import {constant} from '@/utils/constant.js'
	import {
		publish,getLostFoundInfo
	} from "@/api/lostFound.js";
	import {
		getDicts
	} from "@/api/dict-data.js";
	export default {
		data() {
			return {
				form: {
					type: 1,
					title: '',
					content: '',
					pic:''
				},
				action: appConfig.WEB_API + '/common/upload',
				header: {
					'Content-Type': 'application/json',
					'ApiAuthorization': uni.getStorageSync(constant.tokenKey)
				},
				fileList: [],  // 图片回显列表
				limitType: ['png', 'jpg', 'jpeg', 'webp', 'gif'], // 图片格式限制
				sizeType: ['compressed'], // 图片压缩
				lostFoundTypeList: [],  // 类型列表
				loading: false,
				rules: {
					title: [{ 
						required: true, 
						message: '标题不能为空',
						trigger: ['change','blur']
					}],
					content: [{
						required: true, 
						message: '写点什么吧',
						trigger: ['change','blur']
					}],
					pickAddress: [{
						required: true, 
						message: '捡取地址不能为空',
						trigger: ['change','blur']
					}],
					takeAddress: [{
						required: true, 
						message: '寄放地址不能为空',
						trigger: ['change','blur']
					}]
				}
				
			}
		},
		methods: {
			// 选中任一 radio时，由radio-group触发
			radioGroupChange(e) {
				this.form.type = e
			},
			getLostFoundInfo(foundId) {
				getLostFoundInfo(foundId).then(res => {
					this.form = res.data
					// 图片回显
					if(res.data.pic) {
						this.fileList = [{url: res.data.pic}]
					}
				})
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$refs.uUpload.upload();
					}
				})
			},
			// 所有图片上传完毕触发
			uploaded(lists, name){
				this.loading = true
				if (lists.length != 0) { //放了图片
					if (lists[0].response) {
						this.form.pic =  lists[0].response.data.url
					} else {
						this.form.pic = lists[0].url
					}
				} 
				publish(this.form).then(res => {
					// 发布成功
					this.$u.route({
						url: '/pages/lost-found-detail/lost-found-detail',
						type: 'redirectTo',
						params: {
							foundId: res.data.foundId
						}
					})
				})
				this.loading = false
			}
		},
		async onLoad(options) {
			
			// 查询字典：商品收取类型
			await getDicts('hy_lost_found_type').then(res => {
				this.lostFoundTypeList = res.data
			})
			
			if (options.foundId) {
				this.getLostFoundInfo(options.foundId)
			}
		},
		//表单校验：必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	@import "./add-lost-found.scss";
</style>
